<template>
  <div class="cart">
    <div class="cart_top">
      <span class="s1">编辑</span>
      <span class="s2">购物车</span>
    </div>
    <div class="gun">
      <div class="bulb">
        <img src="../../assets/imgs/2.png" alt class="im1" />
      </div>
      <div class="guess">猜你喜欢</div>
      <div class="shopL">
        <ul>
          <li v-for="(item,i) in shopList" :key="i">
            <img :src="item.pic" alt />
            <p class="p1">{{item.name}}</p>
            <p class="p2">{{item.name}}</p>
            <p class="p3">
              <span class="s1">￥{{item.minPrice}}</span> 
              <span class="s2">已售{{item.numberOrders}}</span>
            </p>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { getBarGin } from "../../utils/api/home";
export default {
  name: "",
  data() {
    return {
      shopList: [],
      page: parseInt(Math.random() * 7 + 1),
      pageSize: 4,
    };
  },
  created() {
    let obj = {
      page: this.page,
      pageSize: this.pageSize,
    };
    getBarGin(obj).then((res) => {
      this.shopList = res.data;
    });
  },
  mounted() {},
  methods: {
  
  },
};
</script>

<style lang='scss' scoped>
.cart {
  width: 100%;
  height: 100%;

  .cart_top {
    position: fixed;
    top: 0;
    width: 100%;
    height: 1rem;
    font-size: 0.3rem;
    line-height: 1rem;
    display: flex;
    text-align: center;
    border-bottom: 1px solid #ccc;
    background-color: #ffffff;
    .s1 {
      flex: 1;
    }
    .s2 {
      flex: 3;
    }
  }
  .bulb {
    text-align: center;
    .im1 {
      width: 7rem;
    }
  }

  .guess {
    width: 100%;
    height: 1rem;
    line-height: 1rem;
    text-align: center;
    font-size: 0.3rem;
  }
  .shopL {
    font-size: 0.3rem;
    width: 100%;
    height: 356px;
    ul {
      width: 100%;
      height: 100%;
      display: flex;
      flex-wrap: wrap;
      text-align: center;
      justify-content: center;
      li {
        position: relative;
        width: 48%;
        height: 5rem;
        img {
          width: 90%;
          height: 70%;
        }
      }
    }
  }
}
.gun {
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}
p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.p1 {
  width: 90%;
  height: 0.4rem;
  line-height: 0.4rem;
  background-color: blanchedalmond;
  position: absolute;
  bottom: 1.5rem;
  left: 0.18rem;
}
.p2 {
  width: 100%;
  margin-top: 0.2rem;
}
.p3 {
  width: 100%;
  margin-top: 0.2rem;
  display: flex;
  .s1 {
    flex: 1;
    color: red;
    margin-left: 0.2rem;
  }
  .s2 {
    flex: 3;
    color: #ccc;
    text-align: right;
    margin-right: 0.2rem;
  }
}
</style>